<template>
    <!-- 评估模型维护 -->
    <div class="app-container2 pinggumoxingweihu">
      <div class="left_box">
        <el-input
          v-model="searchValue"
          class="seach_input js_common_input2"
          placeholder="请输入搜索节点"
          suffix-icon="el-icon-search"
          clearable
          style="margin-bottom: 20px"
        />
        <div class="left_tree">
          <el-scrollbar class="left_scrollbar el-scrollbar-bai">
            <el-tree
              class="js_common_tree"
              :data="treeData"
              :props="defaultProps"
              :expand-on-click-node="false"
              node-key="label"
              ref="tree"
              :filter-node-method="filterNode"
              current-node-key="板卡1"
              default-expand-all
            />
          </el-scrollbar>
        </div>
      </div>
      <div class="right-box">
        <div class="modal-search-box">
          <div class="top">
            <div class="left">
              <div class="form-item">
                <el-button class="js_common_btn colorStyle form-btn"
                  >刷新</el-button
                >
              </div>
              <div class="form-item">
                <el-button class="js_common_btn colorStyle form-btn"
                  >导出</el-button
                >
              </div>
              <div class="form-item form-checkBox">
                <el-checkbox
                  v-model="refrshCheck"
                  class="form-check"
                ></el-checkbox>
                五秒定时刷新
              </div>
            </div>
  
            <el-button class="js_common_btn colorStyle">诊断规则导出</el-button>
          </div>
        </div>
        <div class="right_main">
          <div class="right_main_bottom">
            <el-table
              class="jk_common_table004"
              :data="tableData"
              height="style"
              border
              style="width: 100%; height: 100%"
            >
              <el-table-column prop="id" label="序号" width="180" align="center">
              </el-table-column>
              <el-table-column prop="name" label="设备名称" align="center">
              </el-table-column>
              <el-table-column prop="sbtype" label="设备类型" align="center">
              </el-table-column>
              <el-table-column prop="cdname" label="测点名称" align="center">
              </el-table-column>
              <el-table-column prop="cValue" label="测点实时值" align="center">
              </el-table-column>
              <el-table-column prop="status" label="诊断状态" align="center">
              </el-table-column>
              <el-table-column prop="type" label="故障类型" align="center">
              </el-table-column>
              <el-table-column prop="ms" label="故障模式" align="center">
              </el-table-column>
              <el-table-column prop="operate" label="操作" align="center">
                <template>
                  <el-button type="text">解决方案</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        treeData: [
          {
            label: "DOS系统",
            children: [
              {
                label: "操作员站1",
                children: [],
              },
              {
                label: "操作员站2",
                children: [],
              },
              {
                label: "历史服务器",
                children: [],
              },
              {
                label: "计算服务器",
                children: [],
              },
              {
                label: "通信服务器",
                children: [],
              },
              {
                label: "控制站1",
                children: [],
              },
              {
                label: "控制站2",
                children: [
                  {
                    id: 1,
                    label: "板卡1",
                  },
                  {
                    label: "板卡2",
                  },
                ],
              },
              {
                label: "网关",
                children: [],
              },
              {
                label: "交换机",
                children: [],
              },
              {
                label: "打印机",
                children: [],
              },
            ],
          },
        ],
        defaultProps: {
          children: "children",
          label: "label",
        },
        searchValue: "",
        tableData: [
          {
            id: "1",
            name: "D1221",
            sbtype: "三级模块",
            cdname: "dev1_tag1",
            cValue: "20.1",
            status: "正常",
            type: "硬件故障",
            ms: "通信失效",
          },
        ],
        refrshCheck: false,
      };
    },
    watch: {
      // 根据搜索节点
      searchValue(val) {
        this.$refs.tree.filter(val);
      },
    },
    methods: {
      // 筛选节点
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      checkoutTableItemFn(id, checkIdArr) {
        console.log(id, checkIdArr);
        let flag = checkIdArr.some((item) => {
          return item === id;
        });
        console.log(flag);
        return flag;
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  $modelCreatebgColor: #0e2141;
  .pinggumoxingweihu {
    width: 100%;
    display: flex;
    ::v-deep .colorStyle {
      span {
        color: #ccc !important;
      }
    }
    .left_box {
      margin-right: 15px;
      flex: 0 0 auto;
      background: linear-gradient(to top, #163d71, #185a85, #163d71);
      box-sizing: border-box;
      width: 250px;
      padding: 20px;
      text-align: center;
      ::v-deep .seach_input {
        border-radius: 30px;
        .el-input__icon {
          color: rgba(31, 133, 190, 1);
        }
        .el-input__inner {
          border-radius: 30px;
          border: 1px solid #185a85;
        }
      }
      .left_tree {
        height: 75vh;
      }
      ::v-deep .left_scrollbar {
        height: 100%;
        .el-scrollbar__wrap {
          overflow: inherit !important;
          overflow-y: scroll !important;
        }
      }
    }
    .right-box {
      flex: 1 1 auto;
      width: 0;
      background: #163368;
      display: flex;
      flex-direction: column;
      .modal-search-box {
        flex: 0 0 auto;
        padding-top: 18px;
        margin-bottom: 18px;
        .top {
          display: flex;
          justify-content: space-between;
          padding: 0 23px;
          .left {
            display: flex;
            .form-item {
              display: flex;
              align-items: center;
              margin-right: 15px;
              color: #fff;
              &.select-box {
                width: 300px;
              }
              &.time-box {
                width: 300px;
              }
              .label {
                color: #cbcbcb;
                flex-shrink: 0;
                font-size: 14px;
                margin-right: 3px;
              }
            }
            .form-btn {
              width: 80px;
            }
            .form-checkBox {
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 14px;
              .form-check {
                margin-right: 10px;
                margin-top: 2px;
              }
            }
          }
        }
      }
      .cengji-chart-box {
        width: 100%;
        height: 220px;
      }
      .right_main {
        flex: 1 1 auto;
        width: 100%;
        height: 0;
        display: flex;
        flex-direction: column;
        .right_main_top,
        .right_main_bottom {
          display: flex;
          flex-direction: column;
          box-sizing: border-box;
          background-color: #0f2245;
        }
        .right_main_bottom {
          flex: 1 1 auto;
          width: 100%;
          height: 0;
          .right_content_wrap {
            flex: 1 1 auto;
            width: 100%;
            height: 0;
            background: $modelCreatebgColor;
          }
        }
        .common_title_wrap {
          flex: 0 0 auto;
          width: 100%;
          height: 62px;
          background: linear-gradient(to bottom, #134183, #113b78);
          display: flex;
          align-items: center;
          justify-content: space-between;
          box-sizing: border-box;
          padding: 0 20px;
          .common_title_btn {
            width: 160px;
            text-align: center;
            font-size: 20px;
            height: 32px;
            line-height: 32px;
            color: #ccc;
            // background: linear-gradient(to right, #247ab7, #279cce, #247ab7);
            background: linear-gradient(to right, #1f589e, #2384b5, #1f589e);
            cursor: pointer;
            &:hover {
              opacity: 0.9;
            }
          }
          .common_title_btn_right {
            width: 160px;
            text-align: center;
            font-size: 20px;
            height: 32px;
            line-height: 32px;
            color: #ccc;
            background: linear-gradient(to right, #1f589e, #2384b5, #1f589e);
            // background: linear-gradient(to right, #247ab7, #279cce, #247ab7);
            cursor: pointer;
            &:hover {
              opacity: 0.9;
            }
          }
  
          .common_title_other {
            display: flex;
            align-items: center;
            .other_search_wrap {
              display: flex;
              align-items: center;
              margin-right: 100px;
              .search_name {
                color: #ccc;
                font-size: 20px;
                margin-right: 8px;
              }
            }
          }
        }
        .common_main_scrollbar_content {
          width: 100%;
          height: 100%;
          box-sizing: border-box;
          padding: 20px;
          font-size: 20px;
          color: #ccc;
          line-height: 32px;
          background: linear-gradient(to bottom, #12315e, #154173);
        }
        .duizhanbiao_table {
          width: 100%;
          height: 100%;
          .table_checkout_box {
            display: flex;
            align-items: center;
            justify-content: center;
            .icon {
              font-weight: 700;
              font-size: 18px;
            }
          }
        }
      }
    }
  }
  </style>
  